
import React from 'react';
import { inject, observer } from 'mobx-react';
import {WeaProgress,WeaSteps  } from "ecCom";
import { WeaTableNew } from "comsMobx";
const WeaTable = WeaTableNew.WeaTable;
import {Timeline,Icon,Row,Col,Button} from 'antd';
const Step = WeaSteps.Step;
import './style/index.css';
import AgreedBillGroup from './AgreedBillGroup';

@inject('agreedBillStore')
@observer
export default class AgreedBill extends React.Component {
	constructor(props){
		super(props);
		this.state = {
            
        }
	}

	componentDidMount() {
        const {init} = this.props.agreedBillStore;
        const {refId,payType} = this.props;
        init(refId,payType);
    }
    
    componentWillReceiveProps(nextProps) {
        const {init} = this.props.agreedBillStore;
        const {refId,payType} = nextProps;
        if (this.props.refId !== nextProps.refId||this.props.payType !== nextProps.payType) {
			init(refId,payType);
        }
    }

	componentWillUnmount(){
		const {componentWillUnmount} = this.props.agreedBillStore;
		componentWillUnmount();
	}

	render() {
		const {bills,payType,total,sendPays,payTypeName} = this.props.agreedBillStore;
		return (
			<div style={{height:"100%",padding:"15px 24px"}}>
				{bills.length>0?<div>
					<Timeline>
						{
							bills.map((item)=>{
								return (<AgreedBillGroup item={item} />)
							})
						}
					</Timeline>
					<div style={{float:'left',width:'100%',color:'red',fontWeight:"700",height:"50px",lineHeight:"50px",verticalAlign:"middle"}}>
						<Row>
							<Col span={2}></Col>
							<Col span={2}><span>合计：</span></Col>
							<Col span={2}><span>￥{total.payTotal||0}</span></Col>
							<Col span={2}><span>{payTypeName}款比例：</span></Col>
							<Col span={6}><WeaProgress percent={total.proportion||0} strokeColor={(total.proportion||0)>=100?"#52c41a":"red"} strokeWidth={12} status={(total.proportion||0)>=100?"success":"active"} /></Col>
							<Col span={8}></Col>
							<Col span={2}>{total.needPay&&<Button onClick={()=>sendPays()} type="primary" size="middle" >催款</Button>}</Col>
						</Row>
					</div>
				</div>
				:
				<div style={{textAlign:'center',color:'#ccc'}}>暂无数据</div>
			}
			</div>
		)

	}

}